<template>
	<view>
		<!-- 轮播图及商品名称 -->
		<!-- <view class="wrap head-wrap">
			<carousel :image="carouselImages" />

			<commonPriceTag price="66.00" cost="55.80" sell="2564" />

			<view class="title__container">
				<view class="name__message">富强民主文明和谐自由平等公正法治爱国敬业诚信友善富强民主文明和谐自由平等公正法治爱国敬业诚信友善</view>
				<view class="sub_name__message">新老包装随机发货，敬请谅解</view>
			</view>
		</view> -->
		<view class="wrap head-wrap" v-if="RecommendGoods">
			<carousel :image="RecommendGoods.images" />
		
			<commonPriceTag :price="RecommendGoods.original_price" :cost="RecommendGoods.price" :sell="RecommendGoods.sales" />
		
			<view class="title__container">
				<view class="name__message">{{RecommendGoods.goods_name}}</view>
				<view class="sub_name__message">{{RecommendGoods.goods_subname}}</view>
			</view>
		</view>

		<!-- 规格 -->
		<view class="wrap spec-wrap flex-x">
			<view class="item12-2 spec__list">规格</view>
			<view class="item12-8 spec" @tap="openSpecToast(false)">请选择规格</view>
			<view class="item12-2 spec__icon" @tap="openSpecToast(false)">
				<i class="iconfont iconright"></i>
			</view>
		</view>

		<!-- 服务 -->
		<view class="wrap spec-wrap flex-x">
			<view class="item12-2 spec__list">服务</view>
			<view @tap="openToast" class="item12-8" v-if="RecommendGoods">
				<!-- <span class="server__set"><i class="iconfont icon7tiantuihuan"></i>七天退换</span>
				<span class="server__set"><i class="iconfont iconanquan"></i>正品保障</span> -->
				<span class="server__set" v-for="(item,index) in RecommendGoods.services"><i class="iconfont iconanquan"></i>{{item.services_name}}</span>
			</view>
			<view @tap="openToast" class="item12-2 spec__icon">
				<i class="iconfont iconright"></i>
			</view>
		</view>

		<!-- 优惠券 -->
		<scroll-view scroll-y="true" :class="goodCoupon.length!=0?'coupon':''">
			<view class="wrap coupon__wrap flex-x center middle" v-for="(item,index) in goodCoupon">
				<coupon :itemCont="item" @event="couponGet" />
			</view>
		</scroll-view>

		<!-- 商品详情选项卡 -->
		<view class="wrap bottom_wrap flex-x center item-3" v-if="RecommendGoods">
			<view @tap="changeWindows(0)" class="flex-y center">
				<view>商品详情</view>
				<view :class="(0 == this.currentWindows) ? 'wrap__active' : 'wrap__unactive'" />
			</view>
			<view @tap="changeWindows(1)" class="flex-y center">
				<view>规格参数</view>
				<view :class="(1 == this.currentWindows) ? 'wrap__active' : 'wrap__unactive'" />
			</view>
			<view @tap="changeWindows(2)" class="flex-y center">
				<view>用户评价<span>({{RecommendGoods.comment.length}})</span></view>
				<view :class="(2 == this.currentWindows) ? 'wrap__active' : 'wrap__unactive'" />
			</view>
		</view>

		<!-- 选项卡内容 -->
		<view class="wrap wrap__detail" v-if="RecommendGoods">
			<!-- 商品详情 -->
			<view v-show="(0 == this.currentWindows)" class="goods_detail">

			</view>
			<!-- 规格参数 -->
			<view v-show="(1 == this.currentWindows)" class="goods_spec flex-x center">
				<msTable :element="RecommendGoods.spec" />
			</view>
			<!-- 用户评价 -->
			<view v-show="(2 == this.currentWindows)" class="goods__comment">
				<view v-for="(item,index) in RecommendGoods.comment">
					<comments 
						:head="item.path"
						:name="item.member_name"
						:comment="item.comment"
						:time="item.create_time"
						:level="item.star"
						:images="item.images"/>
					<!-- <comments head="http://mer.crmeb.net/uploads/def/20201210/0977b8689429d1f8f5bd785a5b2665a2.png" name="狗狗***"
					 comment="嘿嘿嘿，真的不错喔" time="2021-02-06" :images="['http://mer.crmeb.net/uploads/def/20201210/0977b8689429d1f8f5bd785a5b2665a2.png' ,'http://mer.crmeb.net/uploads/def/20201210/0977b8689429d1f8f5bd785a5b2665a2.png']" /> -->

				</view>
				<view class="flex-x center comment__all">
					<view @tap="allComment">
						查看全部
					</view>
				</view>
			</view>
		</view>

		<!-- 服务弹窗 -->
		<toast v-show="serverToast" @event="openToast">
			<view class="__toast__server" v-if="RecommendGoods">
				<view class="toast-title">服务保障</view>

				<!-- <view class="server__option flex-x top">
					<view class="__option_icon">
						<i class="iconfont icon7tiantuihuan"></i>
					</view>
					<view class="__option_content">
						<view class="title__option">七天退换</view>
						<view class="remark__option">满足7天无理由退换申请的前提下，包邮商品需要卖家承担退货邮费，非包邮商品需要买家承担发货和退货邮费</view>
					</view>
				</view>
				<view class="server__option flex-x top">
					<view class="__option_icon">
						<i class="iconfont iconanquan"></i>
					</view>
					<view class="__option_content">
						<view class="title__option">正品保障</view>
						<view class="remark__option">正品保障，假一赔三</view>
					</view>
				</view> -->
				<scroll-view scroll-y="true">
					<view class="server__option flex-x top" v-for="(item,index) in RecommendGoods.services">
						<view class="__option_icon">
							<i class="iconfont iconanquan"></i>
						</view>
						<view class="__option_content">
							<view class="title__option">{{item.services_name}}</view>
							<view class="remark__option">{{item.services_desc}}</view>
						</view>
					</view>
				</scroll-view>

				<view class="flex-x center">
					<view @tap="openToast" class="toast__close_btn item12-10">确认</view>
				</view>
			</view>
		</toast>

		<!-- 规格弹窗 -->
		<toast height="75" v-show="specToast" @event="openSpecToast" v-if="RecommendGoods">
			<view class="__toast__spec">
				<view class="__toast__head flex-x top">
					<view class="item12-3">
						<image :src="imagePath" mode="aspectFill" />
					</view>
					<view class="item12-8">
						<view class="toast_name">{{RecommendGoods.goods_name}}</view>
						<view class="toast_price" v-if="isAll">{{DesPrice}}</view>
					</view>
					<view @tap="openSpecToast" style="margin-left: 15rpx;" class="item12-1">
						<i style="font-size: 38rpx;" class="iconfont iconchahao"></i>
					</view>
				</view>
				
				<scroll-view scroll-y="true">
					<view class="__toast__spec_option">
						<specOption v-for="(item ,index) in RecommendGoods.spec"
							@event="optionChange"
							:key="index"
							:optionKey="index"
							v-model="optionId[index]"
							:spec="item.spec_name" :items="item.detail"/>
					</view>
					
					<view class="__toast__spec_option">
						<view class="flex-x __toast__number">
							<view class="item12-6 __number_title">购买数量</view>
							<view class="item12-6 __number_option flex-x right">
								<view @tap="numberOption(false)" class="__number_option_btn subtract">-</view>
								<view class="__set_number">{{number}}</view>
								<view @tap="numberOption(true)" class="__number_option_btn plus">+</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="__toast__make__order flex-x center">
					<view @tap="isAll?makeOrder():''" :style="{'background':isAll? '#E6B873':'#CDCDCD'}" class="item12-12 make_order__btn">确认</view>
				</view>
			</view>
		</toast>
		
		<!-- 海报弹窗 -->
		<!-- <view class="poster">
			<view>
				<image src="../../static/img/tabbar/home.png"  style="width: 600rpx;height: 360rpx;" mode="aspectFill"></image>
			</view>
			<view class="innertPoster">
				<view class="left">
					<view>@*******</view>
					<view>时间，会让我们知道……</view>
				</view>
				<view class="right">QRcode</view>
			</view>
		</view> -->

		<!-- 底部栏 -->
		<bottomGroup :images="imagePath" :collect_status="goodCollect" :id="goodId" :price="goodPrice">
			<view class="flex-x center item-2 bottom__btn">
				<view @tap="openSpecToast(false)" class="__btn bg__black">加入购物车</view>
				<view @tap="openSpecToast(true)" class="__btn bg__god">立即购买</view>
			</view>
		</bottomGroup>
	</view>
</template>

<script>
	import carousel from "@/components/goodsMsg/carousel.vue";
	import comments from "@/components/goodsMsg/comments.vue";
	import msTable from "@/components/goodsMsg/table.vue";
	import toast from "@/components/goodsMsg/toast.vue";
	import specOption from "@/components/goodsMsg/specOption.vue";
	import coupon from "@/components/discount-coupon/discount-coupon.vue";
	import bottomGroup from "@/components/goodsMsg/bottom/bottomGroup.vue"
	import commonPriceTag from "@/components/goodsMsg/priceTag/common.vue"
	import sharePoster from "@/components/poster/share-poster.vue"
	import util from "@/common/util.js";

	export default {
		components: {
			comments,
			msTable,
			toast,
			coupon,
			carousel,
			specOption,
			bottomGroup,
			commonPriceTag,
			sharePoster,
		},
		data() {
			return {
				// false 加入购物车 ,true 直接购买
				isBuy: false,
				number: 1,
				optionId: [],

				specItems: [{
						id: 1,
						name: '年份',
						itemDetail: [{
								id: 11,
								name: '2018'
							},
							{
								id: 12,
								name: '2019'
							},
							{
								id: 13,
								name: '2020'
							},
							{
								id: 14,
								name: '2021'
							}
						]
					},
					{
						id: 2,
						name: '年级',
						itemDetail: [{
								id: 21,
								name: '高一'
							},
							{
								id: 22,
								name: '高二'
							},
							{
								id: 23,
								name: '高三'
							}
						]
					}
				],

				serverToast: false,
				specToast: false,

				currentWindows: 2,
				carouselImages: [
					'http://img30.360buyimg.com/popWaterMark/jfs/t487/29/112057460/48473/c0a72016/544f71e6Ne63050ff.jpg',
					'http://img30.360buyimg.com/popWaterMark/jfs/t1/135493/13/4491/115414/5f0e6347E6a6e0b0e/679419734cf10e4b.jpg',
					'http://img30.360buyimg.com/popWaterMark/jfs/t10675/253/1344769770/66891/92d54ca4/59df2e7fN86c99a27.jpg'
				],
				goodId:0, //商品ID
				goodPrice:0, //商品价格
				RecommendGoods:null, //推荐商品
				DesPrice:'请选择规格', //实际消费价格
				imagePath:null, //商品主图,
				spec_price_id:0, //购买商品规格id
				spec_name:0, //商品规格名称
				goodCollect:0, //商品收藏状态
				goodCoupon:[], //商品优惠券
				isAll: false, //商品规格全选
			}
		},
		computed: {},
		onLoad(e) {
			this.goodId = JSON.parse(e.data).id
			this.goodPrice = JSON.parse(e.data).price
			console.log('商品ID',this.goodId);
			console.log('商品价格',this.goodPrice);
		},
		created() {
			this.RecommendGood()
		},
		methods: {
			//推荐商品详情
			RecommendGood(){
				/* let resData = {
					activities:1
				} */
				this.$shopApi.apiPost('font/goods/info/'+this.goodId).then(res => {
					console.log('res',res);
					const DATA = res.data
					if(DATA.code == 200){
						this.RecommendGoods = DATA.data.goods
						//评论切割2条
						this.RecommendGoods.comment = this.RecommendGoods.comment.slice(0,2)
						//评论时间去除时分秒
						for (var i = 0; i < this.RecommendGoods.comment.length; i++) {
							this.RecommendGoods.comment[i].create_time = this.RecommendGoods.comment[i].create_time.replace(/ .*/g,'')
						}
						this.goodCoupon = DATA.data.coupon
						this.goodCollect = this.RecommendGoods.collect_status
						//主图
						this.imagePath = this.util.getMainImage(this.RecommendGoods.images)
						for (var i = 0; i < this.goodCoupon.length; i++) {
							this.goodCoupon[i]['state'] = 0
							var myReceive = Number(this.goodCoupon[i].quota - this.goodCoupon[i].myreceive); //优惠券剩余领取次数
							if (myReceive <= 0) {
								this.goodCoupon[i]['state'] = -1;
							}
							this.goodCoupon[i]['stateName'] = this.util.couponState(this.goodCoupon[i].state);
							this.goodCoupon[i]['number'] = Number(this.goodCoupon[i].total - this.goodCoupon[i].receive); //优惠券剩余数量
							this.goodCoupon[i].startTime = this.goodCoupon[i].start_time.substring(0, 10).replace(/-/g, '.');
							this.goodCoupon[i].stopTime = this.goodCoupon[i].stop_time.substring(0, 10).replace(/-/g, '.');
						}
					}
				})
			},
			changeWindows: function(key) {
				this.currentWindows = key
			},

			openToast: function() {
				this.serverToast = !this.serverToast
			},
			openSpecToast: function(isBuy) {
				this.isBuy = isBuy
				this.specToast = !this.specToast
			},
			makeOrder: function() {
				console.log(this.isBuy ? '直接购买' : '加入购物车')
				//选择商品后排序ID组合，小的在前，大的在后
				this.optionId = this.optionId.sort()
				console.log(this.number)
				//this.util.spec(this.optionId,this.RecommendGoods)返回商品组合ID匹对后的数据
				this.specToast = false
				this.DesPrice = this.util.spec(this.optionId,this.RecommendGoods)
				this.spec_price_id = this.util.spec(this.optionId,this.RecommendGoods).unid
				if(this.DesPrice==undefined){
					this.DesPrice = '请选择规格'
				}/* else{
					this.DesPrice = this.DesPrice.cost
				} */
				console.log('price',this.DesPrice);
				//点击直接购买
				if(this.isBuy == true){
					this.$interface.routeLink({
						route: 'confirmOrder',
						data: {
							id: this.goodId,
							number:this.number,
							price:this.DesPrice,
							goods_name:this.RecommendGoods.goods_name,
							goods_subname:this.RecommendGoods.goods_subname,
						},
					})
				//点击加入购物车
				}else{
					let resData = {
						goods_id:this.goodId,
						num:this.number,
						spec_price_id:this.spec_price_id,
					}
					console.log('resData',resData)
					this.$shopApi.apiPost('font/car/save',resData).then(res => {
						const DATA = res.data
						if(DATA.code == 200){
							console.log(res);
							this.util.showDialog('加入购物车成功！')
						}else{
							this.util.showDialog('加入购物车失败！')
						}
					})
				}
			},
			optionChange: function(id, key) {
				this.optionId[key] = id
				this.isAll = false;
				if(this.optionId.length == this.RecommendGoods.spec.length){
					this.isAll = true;
					this.DesPrice = this.util.spec(this.optionId,this.RecommendGoods).price
				}
				console.log(this.optionId);
				/* this.optionId[key]['unid'] = id;
				console.log(this.optionId[key]);
				this.isAll = true;
				// 判断如果有一个类型没有选规格，那么将不能购买商品
				this.optionId.forEach((item, index) => {
					if (!item.unid) {
						this.isAll = false;
					}
				}) */
			},
			numberOption: function(is_plus) {
				this.number = this.number + (is_plus ? 1 : -1)
				this.number = this.number <= 0 ? 1 : this.number
			},
			// 领取优惠
			couponGet: function(e) {
				let _this = this
				for (var i = 0; i < this.goodCoupon.length; i++) {
					console.log('other',i);
					if (this.goodCoupon[i].state == -1) {
						console.log('false',i);
						this.util.showDialog('你已达到领取上限,看看其它吧~');
					} else {
						this.$shopApi.apiPost('font/coupon/get', {unid: this.goodCoupon[i].unid}).then(res => {
							this.util.showDialog(res.data.message);
							if (res.data.code == 200) {
								this.goodCoupon[i].myreceive++; //个人领取优惠券次数加1
								this.goodCoupon[i].receive++; //整体优惠券被领取次数加1
								this.goodCoupon[i]['number'] = Number(this.goodCoupon[i].total - this.goodCoupon[i].receive); //优惠券剩余数量
								var myReceive = Number(this.goodCoupon[i].quota - this.goodCoupon[i].myreceive); //优惠券剩余领取次
								if (myReceive <= 0) {
									this.goodCoupon[i]['state'] = -1;
								}
								this.$forceUpdate();
								this.RecommendGood()
							}
						})						
						return
					}
				}
			},
			allComment: function() {
				// 跳转到全部评论
			}
		}
	}
</script>

<style lang="scss">
	@import url("./style/common-detail.css");
	.poster{
		/* width: 600rpx;
		height: 360rpx;
		background-color: #09BB07;
		position: absolute;
		top: 0;
		left: 50%;
		right: 50%; */
		position: fixed;
		width: 600rpx;
		height: 720rpx;
		background-color: #09BB07;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		border-radius: 10upx;
		z-index: 9999;
	}
	
	.innertPoster{
		height: 202rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.left{
			display: flex;
			flex-direction: column;
			margin-left: 40rpx;
			
			view:nth-child(1){
				font-size: 28rpx;
				margin-bottom: 15rpx;
			}
			
			view:nth-child(2){
				font-size: 20rpx;
				color: #999999;
				margin-top: 15rpx;
			}
		}
		
		.right{
			margin-right: 40rpx;
		}
	}
	
	.coupon{
		height: 400rpx;
	}
	
	.toast_price{
		
	}
</style>
